<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
    <title>Online Stationery Store | Summary Order</title>
    <link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/smoothness/jquery-ui.css"/>
	<link rel="stylesheet" type="text/css" href="styles/validationEngine.jquery.css"/>
	<link rel="stylesheet" type="text/css" href="styles/register.css"/>
	<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
	<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
	<script type="text/javascript" src="scripts/jquery.validationEngine-en.js"></script>
	<script type="text/javascript" src="scripts/jquery.validationEngine.js"></script>
	<script type="text/javascript" src="scripts/jsrender.js"></script>
	<script type="text/javascript" src="scripts/jshashtable-2.1.js"></script>
	<script type="text/javascript" src="scripts/jquery.numberformatter-1.2.3.min.js"></script>
	<script type="text/javascript" src="scripts/basket.js"></script>
	<script id="productTemplate" type="text/x-jsrender">
		<tr id="productID_{{>id.id}}"><td><img src="{{>imagePath}}" style="width:90px; height:90px" id="imageProductID_{{>id.id}}"></td><td><span><b>{{>name}}</b></span><span> Amount: <b>{{>numInStock}}</b></span> - Total price: <span class="productPrice"><b>{{:~previewCurrency(price)}}</b></span></td></tr>
	</script>
	<script type="text/javascript">// <![CDATA[
    function getQuerystring(key, default_) {
        if (default_ == null) default_ = "";
        key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regex = new RegExp("[\\?&]" + key + "=([^&#]*)");
        var qs = regex.exec(window.location.href);
        if (qs == null)
            return default_;
        else
            return qs[1];
    }
    // ]]>
	</script>
    <script type="text/javascript" language="javascript">
		function Cancel(){
			window.location ="Index.html";
		}    
    
		$.views.helpers({
			previewCurrency : function (value) {
			    return $.formatNumber(value, { format: "#,##0.##", locale:"th" }) + " THB";
			}
		});
    
        $(document).ready(function () {
        	var $OnlineStore = {};
        	
        	$OnlineStore.basketItems = [];
        	$OnlineStore.previewCurrency = function (value) {
        	    return $.formatNumber(value, { format: "#,##0.#0", locale:"th" }) + " THB";
        	}
        	$OnlineStore.param = function(name,value){
        		this.name=name;
        		this.value=value;
        	}
        	var email = getQuerystring('email');
        	$("#tbEmail").val(email);
        	$.getJSON("/Product?tbEmail="+email+"&action=getsummary", function(jsonData){
    			console.log(JSON.stringify(jsonData))
    			$OnlineStore.products = jsonData;
    			$("#contentWrapLeft").html($("#productTemplate").render($OnlineStore.products));
    		});
            
        });
    </script>
    
</head>
<body>
<form id="form" action="/Product" method="POST">

<center>
<h2>Online Stationery Store</h2>
<h4>Please press submit button for confirm your purchasing..</h4>
	<table id="contentWrapLeft">
	</table>
	<div style="width: 320px;">
        <table width="320" style="padding-bottom: 30px; padding-top: 30px; padding-left: 10px;"
            border="0" cellspacing="0" cellpadding="0" align="center">
                        <tr>
                            <td>
                                <input type="text" style="display: none" name="tbEmail" id="tbEmail" title="Country is required" maxlength="150" size="50" class="validate[required] textBlack12"/>
                                <input type="text" style="display: none" name="action" id="action" title="Country is required" value="summary" maxlength="150" size="50" class="validate[required] textBlack12"/>
                            </td>
                        </tr>
                        <tr>
                            <td align="center" colspan="2">
                                <input type="Submit" value="Submit"/>
                                <input type="button" onclick="Cancel();" value="Cancel"/>
                            </td>
                        </tr>
        </table>
    </div>
    </center>
</form>
    
</body>
</html>
